<template>
  <div class="article-list-container">
    <!-- 文章列表表格 -->
    <el-table :data="tableData" style="width: 850px" border stripe>
      <!-- 标题图片 -->
      <el-table-column label="标题图片" width="180">
        <template slot-scope="scope">
          <el-image :src="scope.row.titleImage" fit="cover" style="width: 120px; height: 80px"
            :preview-src-list="[scope.row.titleImage]"></el-image>
        </template>
      </el-table-column>
      <!-- 文章列表项添加跳转链接 -->
      <el-table-column label="文章标题">
        <template #default="scope">
          <router-link :to="{ name: 'ArticleDetail', params: { id: scope.row.id } }">
            {{ scope.row.title }}
          </router-link>
        </template>
      </el-table-column>
      <!-- 描述 -->
      <el-table-column prop="description" label="文章描述">
        <template slot-scope="scope">
          <span class="description-text">{{ scope.row.description || '无描述' }}</span>
        </template>
      </el-table-column>
      <!-- 标签 -->
      <el-table-column label="标签" width="180">
        <template slot-scope="scope">
          <el-tag size="small" v-for="(tag, idx) in scope.row.tags" :key="idx">
            {{ tag.name }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pageParams.current" :page-sizes="[10, 20, 30]" :page-size="pageParams.size"
      layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 20px; text-align: right">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'ArticleList',
  data() {
    return {
      tableData: [], // 文章列表数据
      total: 0, // 总条数
      pageParams: { // 分页参数
        current: 1, // 当前页
        size: 10 // 每页条数
      }
    };
  },
  created() {
    // 页面初始化时请求文章列表
    this.getArticleList();
  },
  methods: {
    /**
     * 获取文章列表数据
     */
    async getArticleList() {
      try {
        const res = await this.$axios.post(
          'http://47.104.167.34:9110/api/index/article/list',
          this.pageParams // POST请求参数（分页信息）
        );
        if (res.data.success) {
          this.tableData = res.data.data; // 赋值文章列表
          this.total = res.data.total; // 赋值总条数
        } else {
          this.$message.error(`获取列表失败：${res.data.message || '未知错误'}`);
        }
      } catch (err) {
        this.$message.error('接口请求异常，请稍后重试');
        console.error('ArticleList request error:', err);
      }
    },

    /**
     * 每页条数改变触发
     * @param {Number} val - 新的每页条数
     */
    handleSizeChange(val) {
      this.pageParams.size = val;
      this.getArticleList(); // 重新请求列表
    },

    /**
     * 当前页改变触发
     * @param {Number} val - 新的当前页
     */
    handleCurrentChange(val) {
      this.pageParams.current = val;
      this.getArticleList(); // 重新请求列表
    }
  }
};
</script>

<style scoped>
.article-list-container {
  padding: 20px;
}

.description-text {
  color: #606266;
  line-height: 1.5;
}
</style>